<!--
 * @Author: DUST
 * @Date: 2023-05-16 11:33:24
 * @LastEditors: DUST
 * @LastEditTime: 2024-11-11 15:42:57
 * @FilePath: \business-card-system\admin\src\views\admin\businessCardUser\index.vue
 * @Description: 
 * undefined
-->
<template>
  <admin-page-template>
    <div class="tableHeader mt10 mb10">
      <div class="flex"></div>
      <div class="flex">
        <table-top-btns :list="buttonList" />
      </div>
    </div>
    <!-- 表格 -->
    <ant-table
      v-model:rowskeys="rowskeys"
      v-model:pagination="pagination"
      :dataSource="tableData"
      :loading="tableLoading"
      :columns="columns"
    >
      <template #operation="{ record }">
        <a @click="showEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm
          title="请确认是否删除？"
          @confirm="delBusinessCardUser(record)"
        >
          <a>删除</a>
        </a-popconfirm>
      </template>
      <template #columnCell="{ record, column }">
        <template v-if="column.title == '名片'">
          <a @click="getBusinessCard(record)">领取</a>
        </template>
      </template>
    </ant-table>
    <!-- 新增编辑弹窗 -->
    <addBusinessCardUserModal
      v-if="visible"
      v-model:visible="visible"
      :type="type"
      :loading="loading"
      :data="editData"
      :addrList="addrList"
      :companyList="companyList"
      @ok="doOk"
    />
    <!-- 图片预览 -->
    <a-modal
      :visible="previewVisible"
      :title="previewTitle"
      :footer="null"
      @cancel="handleCancel"
    >
      <div class="center">
        <img v-if="previewData" :src="config.baseurl + previewData.miniQrcode" alt="">
      </div>
    </a-modal>
  </admin-page-template>
</template>

<script setup lang="ts">
import config from "@/config";
import addBusinessCardUserModal from "../components/addBusinessCardUserModal.vue";
import NoteManage from "./index";
import { ref } from "vue";

const previewVisible = ref(false);
const previewTitle = ref("");
const previewData = ref();
const handleCancel = () => {
  previewVisible.value = false;

}
const getBusinessCard = (record: any) => {
  previewVisible.value = true;
  previewData.value = record;
  previewTitle.value = record.name + "的名片"
}

const {
  rowskeys,
  tableLoading,
  pagination,
  tableData,
  columns,
  // 按钮合集
  buttonList,
  addrList,
  companyList,
  // 弹窗
  type,
  loading,
  visible,
  editData,
  doOk,
  showEdit,
  // 删除
  delBusinessCardUser,
} = new NoteManage();
</script>
